/* stylelint-disable color-function-notation */
/* stylelint-disable length-zero-no-unit */
/* stylelint-disable shorthand-property-no-redundant-values */
/* datav整体样式定义--单位统一使用rem */
/* datav整体样式定义--全局颜色（背景色、前景色、重要、警告、次要） */
@datav-color-bg-base: #030409; //全局背景色--page使用
// @datav-color-front-base: #fff; //全局前景色(纯白)
@datav-color-front-base: #75d1f0; //全局前景色--基础颜色（默认使用--蓝绿色偏白)
@datav-color-bg-greenblue: #0a335c99; //信息显示框使用透明背景色--淡蓝色
@datav-color-front-greenblue: #75d1f0;
@datav-color-bg-blue: rgba(5, 25, 46, 0.8);
@datav-color-front-blue: #75d1f0;
@datav-color-bg-yellow: rgba(31, 31, 20, 0.9);
@datav-color-front-yellow: #b2b34d;
@datav-color-bg-red: rgba(31, 20, 20, 0.9);
@datav-color-front-red: #c27070;
/* datav整体样式定义--z-index定义（分为上中下3层，上层-top、中层-map、下层/底层-bg） */
/* 由于app节点默认z-index为0，因此所有的z-index均从0开始往上计算 */
@datav-z-index-top-almost: 30; //从30开始，一般用于需要始终显示在最上层，如系统标题、logo等
@datav-z-index-top: 20; //从20开始，取值20~29，一般用于信息显示区域
@datav-z-index-map-overlay: 15; //从15开始，取值15~-19，一般用于地图叠加图层
@datav-z-index-map-underlay: 10; //从10开始，一般用于地图底图（基础图层）
@datav-z-index-bg: 0; //从0开始，取值0~-9，一般用于页面背景
/* datav整体样式定义--字体定义（中文、英文、label、value、unit） */
/*字体，中文使用 字体名称：cn0*/
@font-face {
  font-family: 'cn0';
  src: url('/fonts/C-YS-BTTH.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: block;
}
/*字体 适合于显示数字 字体名称：UnidreamLED*/
@font-face {
  font-family: 'UnidreamLED';
  src: url('/fonts/UnidreamLED.woff');
  /***兼容ie9***/
  src: url('/fonts/UnidreamLED.eot') format('embedded-opentype'),
    /***兼容ie6-ie8***/ url('/fonts/UnidreamLED.woff') format('woff'), local('UnidreamLED'),
    url('/fonts/UnidreamLED.woff');
  /***默认使用本地的***/
}
/* datav整体样式定义--字号定义（分6级，h0~h5，每一级相差约0.8，使用base*[1.25≈1.3]*级数） */
/* 一般h0用于系统标题、h1用于关键指标值显示、h2用于分模块标题显示、h3用于关键指标label、h4用于关键指标值单位显示、h5用于次要信息显示 */
// @datav-fontsize-modulus: 1.3;
@datav-fontsize-modulus: 1.2;
/* 小分辨率适配，width ≤ 800px base取值为2rem*/
// @datav-fontsize-base: 2rem;
/* 一般分辨率适配，width ≤ 1920px base取值为0.8rem */
@datav-fontsize-base: 0.8rem;
@datav-fontsize-h5: @datav-fontsize-base;
@datav-fontsize-h4: @datav-fontsize-h5 * @datav-fontsize-modulus;
@datav-fontsize-h3: @datav-fontsize-h4 * @datav-fontsize-modulus;
@datav-fontsize-h2: @datav-fontsize-h3 * @datav-fontsize-modulus;
@datav-fontsize-h1: @datav-fontsize-h2 * @datav-fontsize-modulus;
@datav-fontsize-h0: @datav-fontsize-h1 * @datav-fontsize-modulus;

//datav完整页面page的样式
.datav-page {
  @apply h-screen w-screen text-base; //text-base（字体大小：1rem;）

  //设置占用整屏
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  //设置页面整体使用grid布局；行列均划分为24等份
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);

  color: @datav-color-front-base;
  // background: @datav-bg-color;//设置背景色后会覆盖app上的背景图片
  //使用background同时设置背景颜色和等高线地图，修改页面的背景色需修改此处opacity
  background: url(/svg/dem-bg.svg),
    radial-gradient(ellipse at bottom, #1c1c1c 10%, #000000 30%, #1c1c1c 100%);
  // opacity: 90%;
  z-index: @datav-z-index-bg;

  //系统标题名称样式
  .systemTitle {
    position: absolute;
    top: 0;
    z-index: @datav-z-index-top-almost;
    //以下4个属性配合设置标题居中显示
    left: 50%;
    transform: scale(0.9) translate(-50%);
    transform-origin: left top;
    // width: 100%;//不设置宽度，自动宽度由内容自适应，否则会导致下方设置的渐变效果由于宽度太大看不出效果
    //设置标题文字大小
    font-size: @datav-fontsize-h0;
    line-height: @datav-fontsize-h0 * 1.6; //行高设置为对应字号的1.6倍，保持标题文字上下留白
    font-weight: bold;
    //设置颜色和渐变效果
    white-space: nowrap;
    color: transparent;
    background: radial-gradient(circle, #75eff0, #19b2e6);
    -webkit-background-clip: text; //设置背景色只对文字部分显示
  }

  //导航栏：跳转到系统后台或其他网页
  .navigatorBar {
    position: absolute;
    left: 2rem;
    top: 0.6rem;
    display: flex;
    font-size: @datav-fontsize-h4;
    //设置图层显示在上层
    z-index: @datav-z-index-top-almost;

    //设置鼠标移至时显示为手型、文字颜色变换
    .link-wrap {
      display: flex;
      .item {
        padding: 10px;
        color: #52667a;
        cursor: pointer;
        &:hover {
          color: @datav-color-front-base;
        }
      }
    }
  }

  //当前日期时间样式
  .nowTime {
    position: absolute;
    right: 2rem;
    top: 0.6rem;
    display: flex;
    font-size: @datav-fontsize-h2;
    opacity: 0.5;
  }

  //全屏控制样式
  .fullScreenControl {
    position: absolute;
    right: 1rem;
    top: 0.6rem;
    //设置图层显示在上层
    z-index: @datav-z-index-top-almost;
  }

  //全页面（整个视窗大小）样式，用于显示背景或背景装饰
  .fullViewBg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @datav-z-index-bg;

    //覆盖dv-border-box-1自带的有边框的样式
    // .dv-border-box-1 {
    //   &.border {
    //     border: none;
    //     border-style: none;
    //   }
    // }
  }

  //全页面（整个视窗大小）样式，用于显示底层地图等
  .fullViewContainer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @datav-z-index-map-underlay;
    background-color: transparent;
  }

  //叠加在底图图层之上的显示区域；按区域位置进行样式命名
  .area {
    display: grid;
    grid-gap: 0.3rem;
    pointer-events: visible;
    position: relative;
    z-index: @datav-z-index-top;
    background: transparent;

    //左侧整列显示区域
    &.area-left {
      //语法：grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
      grid-area: 3 / 1 / 25 / 7; //设置宽度占1-7列，高度为3-25
      grid-template-columns: repeat(1, 1fr); //设置左侧area按列只分为1份
      grid-template-rows: repeat(3, 1fr); //设置左侧area按行分分为3份
      // background-color: #096dd9;
    }

    &.area-center {
    }

    //水平居中、顶部一栏显示区域
    &.area-center-top {
      grid-area: 3 / 8 / 5 / 18; //设置宽度占8-18列，高度为3-5
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(1, 1fr);
      // background-color: #096dd9;//测试使用，实际均使用area中指定的透明背景

      //使用绝对定位
      //   position: absolute;
      // left: 50%;
      // transform: translateX(-50%);
      // top: 80px;
    }

    //水平居中、底部一栏显示区域
    &.area-center-bottom {
      //可以使用grid定位，或者使用绝对定位
      //使用grid定位时，地图控制工具类使用的a-space换行显示，原因未知，暂时使用绝对定位
      // grid-area: 23 / 8 / 25 / 18; //设置宽度占8-18列，高度为23-25
      // grid-template-columns: repeat(1, 1fr);
      // grid-template-rows: repeat(1, 1fr);
      // background-color: #096dd9;//测试使用，实际均使用area中指定的透明背景
      //使用绝对定位
      position: absolute;
      //通过设置容器宽度和使用flex布局设置其中的内容水平分布
      display: flex;
      bottom: 0; /* 将子元素底部对齐到父元素底部 */
      // width: 40%;//不设置宽度才能保持水平居中
      left: 50%; /* 水平居中的第一步 */
      transform: translateX(-50%); /* 水平居中的第二步，通过translateX调整位置 */
      text-align: center;
      padding: 0.5rem;
    }

    //水平居中、底部倒数一栏显示区域
    &.area-center-bottom-22 {
      grid-area: 22 / 8 / 23 / 18; //设置宽度占8-18列，高度为22-23
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(1, 1fr);
      text-align: center;
      // background-color: #096dd9; //测试使用，实际均使用area中指定的透明背景
    }

    //右侧整列显示区域
    &.area-right {
      grid-area: 3 / 19 / 25 / 25; //设置宽度张19-25列，高度为1-25
      grid-template-columns: repeat(1, 1fr); //设置右侧area按列只分为1份
      grid-template-rows: repeat(3, 1fr); //设置右侧area按行分分为3份
      // background-color: #096dd9;
    }

    //弹出窗口方式显示区域，显示在整个显示屏幕的正中间区域，显示在最上层
    &.area-popup-center {
      z-index: @datav-z-index-top-almost;
      grid-area: 8 / 8 / 18 / 18; //设置宽度占8-18列，高度为8-18
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, 1fr);
    }

    //弹出窗口方式显示区域，显示在整个显示屏幕的右下角区域，显示在最上层
    &.area-popup-right-bottom {
      z-index: @datav-z-index-top-almost;
      grid-area: 8 / 18 / 25 / 25; //设置宽度占19-25列，高度为15-25
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, 1fr);
    }

    //单个显示区域边框样式
    .area-box-border {
      // overflow: scroll;//设置为scroll会在右下角出现白色滚动方块
      overflow: auto;
      background-color: @datav-color-bg-greenblue;
      opacity: 1; //使用@datav-color-bg-greenblue时不需要设置透明度
      margin: 0 0 0 0.5rem; //外边距，只设置左边的外边距
      // padding: 0.3rem; //内边距，使用a-col时样式会被覆盖
      border-radius: 0.5rem;
      box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 50%);
    }

    //显示标题、图表、数据值的一个区域样式：标题显示在上方一行，下方显示图标和对应的数据值
    .area-single-quota {
      //不设置背景色和前景色，由使用位置通过style设置以根据实际内容（数据值）改变颜色
      padding: 0.5rem; //内边距，四周留白
      border-radius: 0.5rem 0 0.5rem 0; //分别设置左上、右上、右下、左下的圆角半径
      text-align: center; //内容居中

      .label {
        //标题文字样式
        //设置标题文字大小
        font-size: @datav-fontsize-h4;
        //不设置行高，设置行高会导致改变grid中的一整行的高度（一整行的高度自动根据内容调整）
        // line-height: @datav-fontsize-h4 * 1.2; //行高设置为对应字号的1.6倍，保持标题文字上下留白
      }

      .value {
        //数值文字样式
        //数据值使用单独的字体
        font-family: 'cn0';
        //设置标题文字大小
        font-size: @datav-fontsize-h1;
        // line-height: @datav-fontsize-h1 * 1.6; //行高设置为对应字号的1.6倍，保持标题文字上下留白
        font-weight: bold;
      }
    }
  }
}
